<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 组件模板定义</title>
</head>
<style>
    .template {
        margin: 5% 10%;
    }
</style>
<body>
<div id="app">
    <div class="template">
        <html-component1 inline-template v-bind:num1="number"><div>{{num1}}</div></html-component1>
        <html-component2 v-bind:num2="number"></html-component2>
        <html-component3 v-bind:num3="number"></html-component3>
    </div>
</div>

<script type="text/x-template" id="html-component2">
       <div>{{num2}}</div>
</script>
<template id="html-component3">
    <div>{{num3}}</div>
</template>
<script src="../js/vue.js"></script>
<script>
    const demo = new Vue({
        el: '#app',
        data: {
            number : 10000,
        },
        methods: {},
        computed: {},
        components: {
            'html-component1': {
                data() {
                    return {
                        message: 'vue_child局部组件',
                    }
                },
                props: {
                    num1: Number,
                }
            },
            'html-component2': {
                props: {
                    num2: Number,
                },
                template: '#html-component2',
            },
            'html-component3': {
                props: {
                    num3: Number,
                },
                template: '#html-component3',
            },
        },
    });
</script>
</body>
</html>